<template>
	<div>
		<div class="d-flex pl-1 pr-1 a-center j-center pt-1" style="height: 50px;">
			<div style="width: 30px;" class="d-flex a-center j-center" @click="back"> <img src="../assets/images/left.png" alt="" class="w-100 pr-1"></div>
			<div style="width: 80%; height: 100%;"> <input type="text" class="w-100 search" v-model="searchVal" style="height: 100%;" placeholder="智能积木越野四驱车"> </div>
			<div style=""  class="d-flex a-center j-center" @click="find"> 搜索</div>
		</div>
		<div class="pl-1 pt-1 pb-1">
			<div style="font-weight: 600; font-size: 1.2rem;">热门搜索</div>	 
		</div>
		<div>
			<img src="../assets/images/demo/search-banner.png" alt="" class="w-100">
		</div>
		<div class="pl-1 pr-1 pt-2 pb-2 d-flex flex-wrap">
			 <color-tag :item="item" :ind="index" v-for="(item,index) in search_history_list" :key="index+''" color @findclick="findHistory"></color-tag>
		</div>
		<div>
			<div class="pl-1 pt-1 pb-1">
				<div style="font-weight: 600; font-size: 1.2rem;">常用分类</div>	 
			</div>
			<div class="pl-1 pr-1  pb-2 d-flex flex-wrap">
				 <color-tag :item="item"  v-for="(item,index) in categary_list" :key="index+''"  :color="false" ></color-tag>
			</div>
		</div>
	</div>
</template>

<script>
	import  colorTag  from  '../components/search/color-tag.vue'
	export  default {
		    components:{
				colorTag
			},
			data(){
				let  list = []
				if(window.localStorage.getItem("history_list") !=null){
					 list =  window.localStorage.getItem("history_list").split(',');
				}
				console.log(list)
				return {
					 searchVal:"",
					 search_history_list: list || [],
					 categary_list:['耳机','手机','音响','手表','配件','网关/传感器','健康','酷玩']
				}
			},
			methods:{
				 back(){
					   this.$router.go(-1)
				 },
				 find(){
					   if(this.searchVal===""){
						    alert("搜索栏不能为空")
					   }else{
						   this.search_history_list=[this.searchVal,...this.search_history_list];
						   window.localStorage.setItem("history_list",this.search_history_list);
						   this.$router.push({
							    name:"SearchList",
								query:{
									search:this.searchVal
								}
						   });
						   this.searchVal ="";
					   }
				 },
				 findHistory(_index){
					  this.$router.push({
						   name:"SearchList",
						   query:{
						   	search:this.search_history_list[_index]
						   }
					  })
				 }
			}
	}
</script>
   
<style scoped>
	.search{
		 border:1px solid #f5f5f5;
		 background-color: #F5F5F5;
		 border-radius: 5px;
	}
	
</style>
